<template>
	<view class="m-doc" :class="customClass" :style="customStyle">
		<template v-for="(item, index) in list">
			<view
				v-if="show(item)"
				:key="item.id"
				class="m-doc-cell"
				@click="onClick(item)"
			>
				<image
					class="m-doc-cell-pic"
					:src="item.pic"
					mode="widthFix"
					@error="onError"
				></image>
				<view class="m-doc-cell-content">
					<view class="m-doc-cell-title">
						{{ item.title }}
					</view>
					<view class="m-doc-cell-info">
						{{ item.info }}
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import { getDocList } from '../../api/doc/index.js'
export default {
	name: 'm-doc',

	props: {
		isHome: Boolean,
		customClass: String,
		customStyle: String
	},

	data() {
		return {
			list: []
		}
	},

	methods: {
		onClick(data) {
			uni.navigateTo({
				url: `/pages/install/detail/detail?id=${data.id}`
			})
		},

		show(item) {
			const { isHome = false } = this
			if (isHome) {
				return item.isHome
			}
			return true
		},

		onError(e) {
			console.log(e)
		}
	},

	created() {
		if (!this.list.length) {
			getDocList(1).then((data) => {
				console.log(data)
				this.list = data.docs
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.m-doc {
	&-cell {
		border-radius: 8px;
		margin-top: 8px;
		display: flex;
		padding-bottom: 8px;
		border-bottom: 1px solid #eee;

		&-pic {
			width: 80px;
			margin-right: 8px;
		}

		&-content {
			flex: 1;
		}

		&-title {
			word-break: break-all;
			font-size: 14px;
			font-weight: 500;
			line-height: 18px;
		}

		&-info {
			word-break: break-all;
			font-size: 12px;
			line-height: 16px;
			color: #666;
		}
	}
}
</style>
